<template>
  <div>
    <Tabs v-model="activeName">
      <TabPane label="MK" name="name1">
        <div class="table-box">
          <table class="myTable">
            <tr>
              <th class="text-left">代码</th>
              <th class="text-center" style="min-width: 80px;">当前价</th>
              <th class="text-right" style="min-width: 80px;">涨跌幅</th>
            </tr>
            <tr v-for="(item, index) in coins.MK" :key="index" @click="showItem(item, 'mk')">
              <td class="text-left">
                <p> {{item.Name }} </p>
                <p style="color: #666666;">{{ item.Symbol }}</p>
              </td>
              <td class="text-center">
                <p :class="{'greenword' : item.ChgPct < 0, 'redword': item.ChgPct > 0}"> {{ item.Last }}</p>
                <p style="color: #666666;font-size: 12px;" >最低{{ item.Low }}</p>

              </td>
              <!--          "green_" : row.ChgPct == 0 ? "gray" : "red__"-->
              <td class="text-right">
                <div :class="{'grays' : item.ChgPct === 0,'greens' : item.ChgPct < 0, 'reds': item.ChgPct > 0}">{{ item.ChgPct }}%</div></td>
            </tr>
          </table>
        </div>
      </TabPane>
      <TabPane label="IPO" name="name2">
        <div class="table-box">
          <table class="myTable">
            <tr>
              <th class="text-left">代码</th>
              <th class="text-center" style="min-width: 80px;">当前价</th>
              <th class="text-right" style="min-width: 80px;">涨跌幅</th>
            </tr>
            <tr v-for="(item, index) in coins.IPO" :key="index" @click="showItem(item, 'ipo')">
              <td class="text-left">
                <p> {{item.Name }} </p>
                <p style="color: #666666;">{{ item.Symbol }}</p>
              </td>
              <td class="text-center">
                <p :class="{'greenword' : item.ChgPct < 0, 'redword': item.ChgPct > 0}"> {{ item.Last }}</p>
              </td>
              <td class="text-right">
                <div :class="{'grays' : item.ChgPct === 0,'greens' : item.ChgPct < 0, 'reds': item.ChgPct > 0}">{{ item.ChgPct }}%</div></td>
            </tr>
          </table>
        </div>
      </TabPane>
    </Tabs>
    <div style="width: 100%;height: 50px;">&nbsp;</div>
    <div class="tarbar flex">
      <Col span="8" class="text-center " @click.native="toPage('mobileExchange')">
        <Icon type="ios-home" size="16" />
        <p class="caidan">首页</p>
      </Col>
      <Col span="8" class="text-center active" >
        <Icon type="ios-bookmarks" />
        <p class="caidan">市场</p>
      </Col>
      <!--      <Col span="6" class="text-center" @click="toPage('mobileTrade')">-->
      <!--        <Icon type="ios-aperture" />-->
      <!--        <p class="caidan">交易</p>-->
      <!--      </Col>-->
      <Col span="8" class="text-center" @click.native="toPage('mobileMine')">
        <Icon type="ios-contact" />
        <p class="caidan">我的</p>
      </Col>
    </div>
        <Modal :title="title" :closable="false" v-model="value3"  class-name="dra">
          <div>
            <div style="width: 34px;" class="text-center" @click="buy">
              <img src="../../assets/images/new_1usd.png" style="width: 34px;height: 34px;" alt="">
<!--              <svg  t="1705939902907" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1466" width="200" height="200"><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m157.76 762.24a224 224 0 0 1-109.76 40V896h-96v-96a247.68 247.68 0 0 1-102.72-40.64 150.72 150.72 0 0 1-64-136.32v-2.24h110.4a89.6 89.6 0 0 0 29.76 74.24 124.48 124.48 0 0 0 80.32 24 109.12 109.12 0 0 0 69.76-19.2 62.08 62.08 0 0 0 24-51.2 66.24 66.24 0 0 0-22.72-52.8 229.44 229.44 0 0 0-80.32-37.44 455.68 455.68 0 0 1-149.44-70.08 131.84 131.84 0 0 1-50.88-109.76 138.88 138.88 0 0 1 57.28-114.24A213.44 213.44 0 0 1 464 224V128h96v96a210.88 210.88 0 0 1 105.28 44.48 148.8 148.8 0 0 1 55.68 124.8v2.56h-111.36a82.88 82.88 0 0 0-25.92-65.6A104.96 104.96 0 0 0 512 306.24a96 96 0 0 0-64 20.16 66.24 66.24 0 0 0-23.04 52.16 56.32 56.32 0 0 0 23.04 47.36 352 352 0 0 0 86.08 39.36 368 368 0 0 1 143.04 69.12 141.76 141.76 0 0 1 49.28 112.64 135.36 135.36 0 0 1-56.64 115.2z" p-id="1467"></path></svg>-->
              <p style="color: #f0ac19">{{$t('ctc.trade')}}</p>
            </div>

          </div>
          <div slot="footer">
            <Button type="error" size="large" long @click="value3 = false">{{ $t('uc.cfd.cancel') }}</Button>
          </div>
        </Modal>
  </div>
</template>

<script>
export default {
  name: "Exchange",
  data(){
    return {
      dataIndex: [],
      coins: {
        MK: [],
        IPO: []
      },
      value3: false,
      title: "",
      curRow: {},
      type: "",
      activeName: "name1"
    }
  },
  computed: {
    activeNav: function() {
      return this.$store.state.activeNav;
    },
    isLogin: function() {
      return this.$store.getters.isLogin;
    },
    member: function() {
      return this.$store.getters.member;
    },
    languageValue: function() {
      var curlang = this.$store.getters.lang;
      if (curlang == "English") this.$i18n.locale = "en";
      return curlang;
    },
    lang() {
      return this.$store.state.lang;
    },
    exchangeSkin() {
      return this.$store.state.exchangeSkin;
    }
  },
  created() {
    this.init()
    this.getIpo()
  },
  methods: {
    init() {
      let resp2
      let coins = []
      this.$http
          .get(this.host + 'api/getIns')
          .then(response => {
            resp2 = response.body.data;
            for (var i = 0; i < resp2.length; i++) {
              var coin = resp2[i];
              coin.isFavor = false;
              //this.coins.MK = coin;
              coins.push(coin);
              this.coins.MK.push(coin);
            }
            this.dataIndex = coins
            console.log(this.dataIndex)
            //this.getKline()
          });
    },
    getIpo() {
      this.$http
          .get(this.host + 'api/getIpo')
          .then(response => {
            const resp2 = response.body.data;
            for (var i = 0; i < resp2.length; i++) {
              var coin = resp2[i];
              coin.isFavor = false;
              //this.coins.MK = coin;
              this.coins.IPO.push(coin);

            }
            // this.changeBaseCion('IPO');
            //this.getKline()
          });
    },
    showItem(row, type) {
      this.curRow = row
      this.title = row.Name
      this.type = type
      this.value3 = true
    },
    toPage(url) {
      this.$router.push(`/${url}`)
    },
    buy(){
      sessionStorage.setItem("buyInfo", JSON.stringify(this.curRow))
      switch (this.type) {
        case "mk":  this.toPage('newTicket')
          break
        case "ipo":  this.toPage('buyIpo')
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.p10 {
  padding: 10px;
}
.tarbar {
  display: flex;
  position: fixed;
  width: 100%;
  height: 50px;
  left: 0;
  bottom: 0;
  background-color: #000000;
}
.text-center {
  text-align: center;
}
.caidan {
  font-size: 12px;
}
.active {
  color: #00aeef;
}
.top {
  width: 100%;
  height: 205px;
  background: url("http://img.navikex.com/uploaded_images/home-top-bg.15337cd9.png") no-repeat top;
  background-size: 100%;
}
.top {
}
.h3 {
  color: #e7ddd1;
}
.t-p1, .t-p2{
  color: #259b86;
}
.t-p1 {
  font-weight: bold;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.pl10 {
  padding-left: 10px;
}
.pr10 {
  padding-right: 10px;
}
.th {
  color: #94897b;
}
.mt15 {
  margin-top: 15px;
}
.reds {
  background-color: #EA5C53;

}
.redword{
  color: #EA5C53;
}
.greenword {
  color: #26A59A;
}
.greens {
  background-color: #26A59A;
}
.grays {
  background-color: #757575;
}
.th{
  background-color: #27313e;
  color: #ccc;
  padding: 10px;
  box-sizing: border-box;
}
.td {
  box-sizing: border-box;
}
.myTable {
  width: 100%;
  border-collapse: collapse;
  tr{
    th {
      background-color: #27313e;
      color: #ccc;
      padding: 10px;
    }
    td{
      background-color: #27313e;
      padding: 10px;
      border-top: 1px solid #000;
    }
  }
}
.dra {
  .ivu-drawer {
    .ivu-drawer-content {
      .ivu-drawer-header{
        background-color: #31313a;
      }
    }
  }
}
::v-deep.ivu-drawer-header{
  background-color: #31313a;
}
::v-deep.ivu-drawer-body{
  background-color: #31313a;
}
</style>